<template>
  <div>
    <el-dialog v-model="dialogVisualFlag" @close="closeDialog" :lock-scroll="false">
      <el-switch
          v-model="showEmoji"
          active-color="#13ce66"
          active-text="emoji模式">
      </el-switch>
      <h4>点赞数:{{ praiseNumber }}</h4>
      <el-row style="margin-bottom: 5px" type="flex" justify="center" align="middle">
        <el-button @click="praiseFromID">{{ showEmoji ? '👍' : '点赞' }}</el-button>
        <el-button @click="gotoSingleImage">{{ showEmoji ? '🔍' : '原图' }}</el-button>
      </el-row>
      <el-row style="margin-bottom: 5px" type="flex" justify="center" align="middle">
        <el-button @click="starPicFromID" type="success">{{ showEmoji ? '✨' : '精选' }}</el-button>
        <el-button @click="r12PicFromID" type="danger">{{ showEmoji ? '🔞' : '不涩' }}</el-button>
      </el-row>
      <el-row style="margin-bottom: 5px" type="flex" justify="center" align="middle">
        <el-button @click="deactivateFromID" type="danger">{{ showEmoji ? '🗑' : '隐藏' }}</el-button>
      </el-row>
    </el-dialog>
    <div class="demo-image__lazy image-top">
      <div v-for="(info, index)  in imageInfoList" class="img">
        <el-image
            :key="info.id"
            :src="info.url"
            @click="clickImgHandler(info.id, index)"
            lazy
        ></el-image>
      </div>
    </div>
    <el-divider v-if="showDivider">没有更多图图了，还不快去画？</el-divider>
    <el-backtop target=".image-top" :visibility-height="400"></el-backtop>
  </div>
</template>

<script lang="ts">
import {ElMessage, ElMessageBox} from "element-plus";
import {ref, PropType} from "vue";
import type {ImageReturnInfo} from "../types";
import {
  choosePicByID,
  deactivateImageByID,
  getPraiseNumberByIDApi,
  praiseImageByID,
  r12PicByID,
} from "../api";
import {useRouter} from "vue-router";

export default {
  name: "SingleImageHolder",
  props: {
    imageInfoList: {
      type: Array as PropType<Array<ImageReturnInfo>>,
      required: true,
    },
  },
  setup() {
    const router = useRouter();
    const showDivider = ref(false);
    const showEmoji = ref(false);
    const dialogVisualFlag = ref(false);
    const selectImgID = ref(0);
    const selectImgIndex = ref(-1);
    const praiseNumber = ref(0);

    setTimeout(() => {
      showDivider.value = true
    }, 1000);

    const clickImgHandler = (id: number, index: number) => {
      dialogVisualFlag.value = true;
      selectImgID.value = id;
      selectImgIndex.value = index;
      getPraiseNumberByIDApi(selectImgID.value).then((res) => {
        praiseNumber.value = res.data;
      });
    };

    const r12PicFromID = () => {
      ElMessageBox({
        message: "是否标记为非R18图片？之后图片只会在青少年模式中展示！",
        type: "warning",
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose(action: string, instance: any, done: any) {
          if (action === 'confirm') {
            r12PicByID(selectImgID.value).then((res) => {
              console.log(res.data);
              ElMessage({
                message: "标记为小孩子都能看的图图!",
                type: "success",
              });
            });
            done();
          } else {
            done();
          }
        }
      }).catch(() => {
      });

    }

    const starPicFromID = () => {
      ElMessageBox({
        message: "是否精选这张图图？之后图片会展示到管理员严选页面。",
        type: "warning",
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose(action: string, instance: any, done: any) {
          if (action === 'confirm') {
            choosePicByID(selectImgID.value).then((res) => {
              console.log(res.data);
              ElMessage({
                message: "选得好哇!!!",
                type: "success",
              });
            });
            done();
          } else {
            done();
          }
        }
      }).catch(() => {
      });

    };

    const praiseFromID = () => {
      praiseImageByID(selectImgID.value).then((res) => {
        praiseNumber.value = res.data;
        ElMessage({
          message: "瑟瑟之力!!!",
          type: "success",
        });
      });
    };
    const deactivateFromID = () => {
      ElMessageBox({
        message: "AI画的不好？点击确定隐藏这张图图，不再出现。（可以在复活区恢复）",
        type: "warning",
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose(action: string, instance: any, done: any) {
          if (action === 'confirm') {
            // imageInfoList【selectImgIndex】.url = 加载失败的图片
            deactivateImageByID(selectImgID.value).then((res) => {
              console.log(res.data);
              dialogVisualFlag.value = false;
              //关闭对话框
              ElMessage({
                message: "吵到我的眼睛了!",
                type: "warning",
              });
            });
            done();
          } else {
            done();
          }
        }
      }).catch(() => {
      });

    };
    const getPraiseNumberByID = () => {
      getPraiseNumberByIDApi(selectImgID.value).then((res) => {
        praiseNumber.value = res.data;
      });
    };

    const gotoSingleImage = () => {
      router.push(`/pic/${selectImgID.value}`);
    };

    /**
     * 关闭对话框，清理数据。
     */
    const closeDialog = () => {
      selectImgID.value = 0;
      praiseNumber.value = 0;
    };

    return {
      showDivider,
      showEmoji,
      clickImgHandler,
      dialogVisualFlag,
      selectImgID,
      praiseFromID,
      deactivateFromID,
      praiseNumber,
      starPicFromID,
      getPraiseNumberByID,
      gotoSingleImage,
      closeDialog,
      r12PicFromID,
    };
  },
};
</script>

<style scoped>
.demo-image__lazy {
  /*水平居中*/
  margin: 0 auto;
  display: flex;
  /*align-content: center;*/
  /*justify-content: space-between;*/
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 1100px;
  /*overflow-y: auto;*/
}

.demo-image__lazy .img {
  display: flex;
  align-items: center;
  flex-direction: row;
  margin: 5px;
  width: 256px;
  height: auto;
}

/*.demo-image__lazy::after {*/
/*    content: '';*/
/*    flex: auto;    !* 或者flex: 1 *!*/
/*}*/

@media screen and (max-width: 1100px) {
  .demo-image__lazy {
    width: 800px;
  }
}

@media screen and (max-width: 800px) {
  .demo-image__lazy {
    width: 600px;
  }
}

@media screen and (max-width: 600px) {
  .demo-image__lazy {
    width: 100%;
  }

  .demo-image__lazy .img {
    width: 90vw;
  }
}
</style>
